<template>
    <el-dialog :close-on-click-modal = "false" title="办事指南" :visible.sync="dialogVisible" height="440px" width="500px">
        <div class="search-row">
            <input placeholder="请输入办理事项名称" class="search-input" type="text">
            <button class="search-btn">
                <img src="../../assets/search.png" alt="">
            </button>
        </div>
        <ul class="search-ul">
            <li v-for="(item,index) in list" :key="index" @click="onClick(index)" v-bind:class="{'active':index === activeIndex}" class="search-list">
                <div class="triangle"></div>
                <div class="phone">
                    <span class="target">◆</span>
                </div>
                <div class="flex1">《企业名称预先核准》</div>
            </li>
        </ul>
        <div v-if="activeIndex>-1" class="detail">
            <div class="title-row">办事指南</div>
        </div>
    </el-dialog>
</template>

<script>
import Pubsub from "../../utils/pubsub";
export default {
    props: {
        list: Array
    },
    data() {
        return {
            dialogVisible: false,
            activeIndex: -1,
            currentList: [1, 23]
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe("showGuidDialog", () => {
            this.dialogVisible = true;
        });
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        onClick(index) {
            this.activeIndex = index;
        }
    }
};
</script>

<style lang = "scss" scoped>
.search-ul {
    height: 291px;
    overflow: auto;
}
.search-list {
    background: #eee;
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 20px;
    box-sizing: border-box;
    color: #000;
    .target {
        margin-right: 10px;
    }
    .triangle {
        position: absolute;
        display: none;
        left: -28px;
        height: 0;
        width: 0;
        border-top: 24px solid transparent;
        border-bottom: 24px solid transparent;
        border-left: 28px solid #fff;
        /* box-shadow: 0.5px 0.9px 2px 0px rgba(153, 153, 153, 0.48); */
        z-index: 9;
    }
    /* &::before {
        position: absolute;
        content: "";
        display: block;
        left: -55px;
        height: 28px;
        width: 28px;
        background-color: transparent;
        box-shadow: 0.5px 0.9px 2px 0px rgba(153, 153, 153, 0.48);
        transform: rotate(45deg);
    } */
    &.active {
        background: #1a36a9;
        color: #fff;
        .triangle {
            display: block;
        }
    }
    .phone {
        /* flex: 0.7; */
    }
}
.detail {
    position: absolute;
    left: -325px;
    background: #fff;
    top: 15px;
    width: 310px;
    height: 415px;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .title-row {
        height: 34px;
        line-height: 34px;
        background: #1a36a9;
        color: #fff;
        padding-left: 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
}
.search-row {
    display: flex;
    position: relative;
    margin-bottom:25px;
}
.search-input {
    flex: 1;
        box-sizing: border-box;
    height: 40px;
    background-color: #fcfcfc;
    border: solid 1px #dcdcdc;
    padding-left: 15px;
    font-size: 14px;
}
.search-btn {
    background: #822424;
    padding: 0 10px;
    img {
        height:24px;
        width: 24px;
    }
}
</style>